<!DOCTYPE html>
<html>
<head>
<title>Capacitor Circuit Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="circuitCanvas" width="600" height="500"></canvas>
<script>
  const canvas = document.getElementById('circuitCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 3;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  
  // --- Draw Capacitor Structure ---
  const plateWidth = 120;
  const plateX_start = 150;
  const plateX_end = plateX_start + plateWidth;
  const plate_t_junction_x = plateX_start + plateWidth / 2; // T-junction in the middle

  const topPlate_y = 180;
  const bottomPlate_y = 320;
  
  // Middle section (movable part)
  const middle_thickness_b = 40;
  const middle_y_center = (topPlate_y + bottomPlate_y) / 2;
  const middle_y_start = middle_y_center - middle_thickness_b / 2;
  const middle_y_end = middle_y_center + middle_thickness_b / 2;

  // Draw plates
  ctx.beginPath();
  // Top plate
  ctx.moveTo(plateX_start, topPlate_y);
  ctx.lineTo(plateX_end, topPlate_y);
  // Bottom plate
  ctx.moveTo(plateX_start, bottomPlate_y);
  ctx.lineTo(plateX_end, bottomPlate_y);
  ctx.stroke();

  // Draw middle section (rectangle)
  ctx.beginPath();
  ctx.rect(plateX_start, middle_y_start, plateWidth, middle_thickness_b);
  ctx.stroke();

  // Fill middle section with hatching
  ctx.save();
  ctx.clip(); // Clip to the rectangle path
  ctx.lineWidth = 2;
  ctx.beginPath();
  const hatch_spacing = 10;
  for (let i = -middle_thickness_b; i < plateWidth; i += hatch_spacing) {
      ctx.moveTo(plateX_start + i, middle_y_start);
      ctx.lineTo(plateX_start + i + middle_thickness_b, middle_y_end);
  }
  ctx.stroke();
  ctx.restore();


  // --- Draw Wires and Terminals ---
  const wire_x = 100;
  const terminal_x = 480;
  const top_wire_y = 120;
  const bottom_wire_y = 380;
  
  ctx.lineWidth = 3; // Reset line width if changed
  ctx.beginPath();
  // T-junction from top plate to wire
  ctx.moveTo(plate_t_junction_x, topPlate_y);
  ctx.lineTo(wire_x, topPlate_y);
  // T-junction from bottom plate to wire
  ctx.moveTo(plate_t_junction_x, bottomPlate_y);
  ctx.lineTo(wire_x, bottomPlate_y);

  // Main circuit loop
  // Top part
  ctx.moveTo(wire_x, topPlate_y);
  ctx.lineTo(wire_x, top_wire_y);
  ctx.lineTo(terminal_x, top_wire_y);
  // Bottom part
  ctx.moveTo(wire_x, bottomPlate_y);
  ctx.lineTo(wire_x, bottom_wire_y);
  ctx.lineTo(terminal_x, bottom_wire_y);
  ctx.stroke();
  
  // Terminals (circles)
  const terminal_radius = 7;
  ctx.beginPath();
  ctx.arc(terminal_x, top_wire_y, terminal_radius, 0, 2 * Math.PI);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.arc(terminal_x, bottom_wire_y, terminal_radius, 0, 2 * Math.PI);
  ctx.stroke();


  // --- Draw Labels and Dimensions ---
  ctx.font = 'bold 22px serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Dimension 'a'
  const dim_a_x = 70;
  ctx.beginPath();
  ctx.moveTo(dim_a_x, topPlate_y);
  ctx.lineTo(dim_a_x, bottomPlate_y);
  ctx.moveTo(dim_a_x - 10, topPlate_y);
  ctx.lineTo(dim_a_x + 10, topPlate_y);
  ctx.moveTo(dim_a_x - 10, bottomPlate_y);
  ctx.lineTo(dim_a_x + 10, bottomPlate_y);
  ctx.stroke();
  ctx.fillText('a', dim_a_x - 25, middle_y_center);

  // Dimension 'b'
  const dim_b_x = plateX_end + 30;
  ctx.beginPath();
  ctx.moveTo(dim_b_x, middle_y_start);
  ctx.lineTo(dim_b_x, middle_y_end);
  ctx.moveTo(dim_b_x - 10, middle_y_start);
  ctx.lineTo(dim_b_x + 10, middle_y_start);
  ctx.moveTo(dim_b_x - 10, middle_y_end);
  ctx.lineTo(dim_b_x + 10, middle_y_end);
  ctx.stroke();
  ctx.fillText('b', dim_b_x + 25, middle_y_center);

  // Voltage V₀
  const v_label_x = terminal_x + 35;
  ctx.font = 'italic bold 24px serif';
  ctx.fillText('V', v_label_x, middle_y_center);
  ctx.font = 'italic bold 18px serif';
  ctx.fillText('0', v_label_x + 12, middle_y_center + 5);

  // Figure Caption
  ctx.font = 'bold 24px serif';
  ctx.fillText('Fig. 1.10', canvas.width / 2, 450);

</script>
</body>
</html>